import React, { Component } from 'react';
import {getRandomInt} from '../../common/Random.js'
import service from '../../service'
import './index.css'
import '../../assets/font_2937004_wstwzbvoht/iconfont.css'
import { SavaLoginUserInfo,saveLoginToken,AuthLogin } from '../../common/Auth.js';
import {message } from 'antd'
import { useNavigate } from 'react-router-dom';
function Submit(props){
    let to = useNavigate()
    function handleSubmit(){
      if(props.username!==''&&props.password!==''&&props.code===props.src)
      {
          service.userLogin({username:props.username,password:props.password}).then(res=>{
          if(res.data){
            SavaLoginUserInfo(res.data.username)        
            saveLoginToken(res.data.token)
            message.success('登入成功')
            to('/home')
          }
          else{
            message.error('登入失败!账号或密码有误！')
          }
        })
      }
      else{
        message.info('登入失败!验证码错误')
      }
    }
  return(
    <button className='login-btn-group' onClick={handleSubmit}>
      登入
    </button>
  )
}
export default class Login extends Component {
  state={
    username:'15170718283',
    password:'123456',
    code:'vwo7',
    src:'vwo7',
    flag:true
  }
  handlerChange=e=>{
    let newState = {[e.target.name]:e.target.value}
    this.setState({...newState})
  }
  changeCode(e){
    service.getCode().then((res)=>{
      this.setState({src:res.data.code})
    })
  }
  passwordChange=e=>{
    if(e.target.className==='iconfont icon-yanjing_yincang')
    {
      e.target.className='iconfont icon-yanjing_xianshi'
      this.setState({flag:false})
    }
    else{
      e.target.className='iconfont icon-yanjing_yincang'
      this.setState({flag:true})
    }
  }
  render() {
    return (
    <div className='login'>
      <div className='top container'><h3>南客后台管理系统</h3></div>
      <div className='main-by'>
        <div className='login-box-wrap'>
          <div className='login-box  container'>
            <div 
              className='login-group'>
              <div className='input-group'>
                <span className='iconfont icon-zhanghao'></span>
                <input name='username' onChange={this.handlerChange} value={this.state.username} type='text' placeholder='请输入电话号码'/>
                <div className='hint' children={this.state.username===''?'账号不能为空!':''}></div>              
              </div>
              <div className='input-group grey-border'>
                <span className='iconfont icon-mima'></span>
                <p className='iconfont icon-yanjing_yincang' onClick={(e)=>{this.passwordChange(e)}}></p>
                <input name='password' onChange={this.handlerChange} value={this.state.password} type={this.state.flag?'password':'text'} placeholder='请输入密码'/>
                <div className='hint' children={this.state.password===''?'密码不能为空!':''}></div>
              </div>
              <div className='code-group input-group'>
                <input type='text' name='code' onChange={this.handlerChange} value={this.state.code} className='code' placeholder='请输入验证码'/>
                <div className='img-code' onClick={(e)=>{this.changeCode(e)}}>
                  <img src={'/api/img/'+this.state.src+'.jpg'}/>
                </div>
              </div>
              <Submit {...this.state}></Submit>
              <div className='link-group'>
                忘记密码?
              </div>
            </div>
            <div className='login-aside'>
              <p>还没注册?</p>
              <p className='active'>立即注册>></p>
            </div>
          </div>
        </div>
      </div>
      <div className='main-ft'>
        &copy;版权所有 aicoder.com 2022-2
      </div>
    </div>
    );
  }
}